<template>
  <div class="full-box line02">
    <v-chart className="chart" :option="chartOption" autoresize/>
  </div>
</template>

<script>
import vChart from "vue-echarts"
import refreshMixin from "@/package/widget/mixins/refreshMixin"
import {getBaseChartOption} from "@/package/widget/chart/01base/util"

import {graphic} from 'echarts'
import {color2rgba} from "@/package/tools/color-gradient";

export default {
  name: 'line02',
  cnName: '流光折线图',
  mixins: [refreshMixin],
  components: {vChart},
  data() {
    return {
      chartOption: {},
      cptData: []
    }
  },
  methods: {
    loadDataOk() {
      const attribute = this.option.attribute
      const opt = getBaseChartOption(attribute)
      const series = []

      const data = this.cptData

      const names = []
      const values = []
      const animationData = []
      data.forEach(item => {
        names.push(item.name)
        values.push(item.value)
        animationData.push([item.name, item.value])
      })

      opt.toolTip = {
        trigger: 'axis'
      }

      const color = attribute.series.lineStyle.color || opt.color[0]
      const colorStart = color2rgba(color, .7)
      const colorEnd = color2rgba(color, .1)

      series.push({
            ...attribute.series,
            type: "line",
            data: values,
            itemStyle: {
              ...attribute.series.itemStyle,
            },
            lineStyle: {
              ...attribute.series.lineStyle
            },
            areaStyle: {
              color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: colorStart,
                    },
                    {
                      offset: 1,
                      color: colorEnd,
                    },
                  ],
                  false
              ),
              opacity: 1,
            },
          }
      )

      series.push({
        type: "lines",
        coordinateSystem: "cartesian2d",
        data: [{
          coords: animationData
        }],
        zlevel: 1,
        polyline: true,
        symbol: "circle",
        effect: {
          show: true,
          trailLength: attribute.lines.trailLength,
          symbol: "circle",
          period: attribute.lines.period,
          symbolSize: attribute.lines.symbolSize
        },
        lineStyle: {
          color: attribute.lines.color,
          width: 0,
          opacity: 0,
          curveness: 0
        }
      })

      opt.series = series
      opt.xAxis.data = names
      this.chartOption = opt
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadDataOk(newVal)
      },
      deep: true
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>

</style>
